<template>
    <div>
        <div class="mt-print-port"  v-for="(item,index) in list">
            <img class="bgImg" src="../../../assets/img/22.jpg"/>
            <div v-if="item[0].planType=='CX'" style="height: 32px;margin-top: -30px;margin-left: 30px;">{{item[0].shipAgentName}}</div>
            <div style="margin-bottom: 23px;height: 16px">
                <i v-if="item[0].planType=='ZX'" style="margin-left: 414px;font-weight: bold">------------</i>
                <i v-if="item[0].planType=='CX'" style="margin-left: 350px;font-weight: bold">------------</i>
            </div>
            <div class="print-flex">
                <div style="margin-left: 90px;min-width: 160px">{{ item[0].planType=='ZX'?item[0].shipAgentName:item[0].shipName }}{{ item[0].tradeType === 'O' ? '' : '内贸' }}</div>
                <div style="margin-left: 60px;min-width: 160px">
                    <span v-if="item[0].planType=='CX'">{{ item[0].voyage }}</span>
                </div>
                <div v-if="item[0].planType=='ZX'" style="margin-left: 75px;min-width: 110px;font-weight: bold">----------</div>
                <div v-if="item[0].planType=='CX'" style="margin-left:20px;min-width: 110px;font-weight: bold">----------</div>
                <div style="margin-left:20px;min-width: 160px;">{{item[0].planType=='ZX'?'货站':'保税'}}</div>
            </div>
            <div class="print-flex" style="margin-top: 5px;">
                <div style="margin-left: 180px;min-width: 100px">{{ item[0].sTime }}</div>
                <div style="margin-left: 70px;min-width: 100px;">{{ item[0].eTime }}</div>
                <div style="margin-left: 70px;min-width: 100px;">{{ item[0].days }}</div>
                <div style="margin-left: 30px">{{ item[0].years }}</div>
            </div>
            <div class="mt-85" style="height: 480px" :style="(index > 0 && list[index-1].length == 15) ? 'margin-top: 90px;':''">
                <div v-for="(i,l) in item">
                    <div class="print-flex" style="height: 32px;line-height: 35px;">
                        <div style="min-width: 90px;text-indent: 45px">{{ i.containerId }}</div>
                        <div style="min-width: 50px;margin-left:75px;">{{ i.containerSize }}</div>
                        <div style="min-width: 110px;margin-left:-5px;">{{ i.sealNo }}</div>
                        <!--<div style="width: 280px;">{{ item.damagedExplan }}</div>-->
                        <div style="min-width: 170px;margin-left:-20px;">
                            <!--{{ i.packing }}-->
                        </div>
                        <div style="min-width: 70px;margin-left: -20px">
                            {{ i.cargoCount }} <i class="el-icon-error" style="color: #777;padding-left: 15px"></i>
                        </div>
                        <div style="min-width: 50px;margin-left: 15px">
                            {{ i.cargoName }}
                        </div>
                        <div style="min-width: 80px;margin-left: 60px;">
                            <span v-if="item[0].planType=='ZX'">{{ i.cargoCount }}</span>
                            <span v-if="item[0].planType=='CX'">空</span>
                        </div>
                        <div style="min-width: 160px;margin-left: -40px;">
                            <span v-if="item[0].planType=='ZX'">
                                <span v-if="!i.remark"></span>
                                <span v-else>该箱有批注</span>
                            </span>
                            <span v-if="item[0].planType=='CX'">箱体完好</span>
                        </div>
                    </div>
                </div>
                <!--<div style="margin-left: 65px;" class="print-other-line"></div>-->
                <!--<div class="set" style="margin-left: 65px;"></div>-->
            </div>


            <!--<div style="width: 280px;">{{ item.damagedExplan }}</div>-->


            <!--<div style="margin-left: 100px;height: 30px">-->
            <!--{{ item.remark }}-->
            <!--</div>-->
            <div style="margin-left: 170px;margin-top: 38px"
                 :style="index!==list.length-1?'page-break-after: always':''">
                {{ item[0].finishUser }}
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "明细打印",
        data() {
            return {
                list: []
            }
        },
        created() {
            let dts = JSON.parse(localStorage.getItem('dts'))
            let newArr = [],tempArr = [],lastArr = [];
            dts.push({});
            if (dts != null && dts[0] != null && dts[0].planType == 'CX') {
                for(let i=0;i<dts.length-1;i++){
                    if(dts[i].finishUser === dts[i+1].finishUser && dts[i].shipAgentName === dts[i+1].shipAgentName && dts[i].tradeType === dts[i+1].tradeType && dts[i].shipName === dts[i+1].shipName && dts[i].voyage === dts[i+1].voyage){
                        tempArr.push(dts[i]);
                    }else {
                        tempArr.push(dts[i]);
                        newArr.push(tempArr.slice(0));
                        tempArr.length = 0;
                    }
                }
            } else {
                for(let i=0;i<dts.length-1;i++){
                    if(dts[i].finishUser === dts[i+1].finishUser && dts[i].shipAgentName === dts[i+1].shipAgentName && dts[i].tradeType === dts[i+1].tradeType){
                        tempArr.push(dts[i]);
                    }else {
                        tempArr.push(dts[i]);
                        newArr.push(tempArr.slice(0));
                        tempArr.length = 0;
                    }
                }
            }
            newArr.forEach(el =>{
                el.sort((a,b)=>{
                    return Date.parse(a.startTime) - Date.parse(b.startTime)
                })
                el[0].sTime = el[0].finishTime.substring(10,16)
                el[0].eTime = el[el.length-1].finishTime.substring(10,16)
                el[0].days = el[0].finishTime.substring(8,10) + "-"+el[0].finishTime.substring(5,7)+"-"
                el[0].years = el[0].finishTime.substring(2,4)
                if(el.length>15){
                    for(let i=0,len=el.length;i<len;i+=15){
                        lastArr.push(el.slice(i,i+15));
                    }
                }else{
                    lastArr.push(el)
                }
            })
            this.list = lastArr
            this.$nextTick(() => {
                setTimeout(function () {
                    window.print()
                    window.close()
                },1000)
            })
        },
    }
</script>

<style scoped>
    .mt-20 {
        margin-top: 20px;
    }

    .mt-32 {
        margin-top: 32px;
    }

    .mt-35 {
        margin-top: 35px;
    }

    .mt-40 {
        margin-top: 40px;
    }

    .mt-45 {
        margin-top: 45px;
    }

    .mt-50 {
        margin-top: 50px;
    }

    .mt-60 {
        margin-top: 60px;
    }

    .mt-70 {
        margin-top: 70px;
    }

    .mt-80 {
        margin-top: 80px;
    }

    .mt-85 {
        margin-top:72px;
    }

    .mt-print {
        margin-top: 315px !important;
        font-size: 14px;
    }

    .mt-print-total {
        margin-top: 245px !important;
        font-size: 14px;
    }

    .mt-print-detail {
        margin-top: 260px !important;
        font-size: 14px;
    }

    .mt-print-damage {
        margin-top: 240px !important;
        font-size: 14px;
    }

    .mt-print-port {
        position: relative;
        padding-top: 335px !important;
        font-size: 14px;
    }
    .bgImg{
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0;
        width: 210mm;
    }
    .print-flex {
        display: flex;
    }

    .print-warp {
        display: flex;
        flex-wrap: wrap;
    }

    .page-next {
        page-break-after: always;
    }

    .print-other-line {
        position: relative;
        width: 500px;
        box-sizing: border-box;
        border: 1px solid;
        line-height: 120px;
        text-indent: 5px;
    }

    .print-other-line::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 250px;
        box-sizing: border-box;
        border-bottom: 1px solid;
        transform-origin: bottom center;
        transform: rotateZ(-45deg) scale(1.414);
        animation: slash 5s infinite ease;
    }

    .set {
        width: 500px;
        background: #000;
        transform-origin: bottom center;
        transform: rotateZ(-45deg) scale(1.414);
        height: 1px;
    }
</style>
